<template>
    <div>
        <el-card shadow="never" class="box-card search_head" style="margin-bottom: 15px;">
            <el-form :model="query" inline style="max-width: calc(100% - 200px );">
                <el-form-item label="名称:">
                    <el-input size="small" @keydown.enter="queryClick" v-model="query.名称"></el-input>
                </el-form-item>
                <el-form-item label="分类:">
                    <el-select v-model="query.分类" @change="queryClick" placeholder="请选择">
                        <el-option label="全部" value="">
                        </el-option>
                        <el-option v-for="item in categorys" :key="item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="queryClick" size="mini" type="primary">
                        查询
                    </el-button>
                    <el-button @click="resetGet" size="mini" type="success">
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
            <div style="position: absolute;right: 20px;top: 20px;">
                <el-button size="mini" @click="addProduct" type="primary">
                    新增产品
                </el-button>
            </div>
        </el-card>
        <el-table :data="tableData" v-loading="loading" stripe style="width: 100%">
            <el-table-column align="center" prop="名称" label="产品名称">
            </el-table-column>
            <el-table-column align="center" prop="分类" label="产品分类">
            </el-table-column>
            <el-table-column align="center" prop="材质" label="材质">
            </el-table-column>
            <el-table-column align="center" prop="尺寸" label="尺寸">
                <template slot-scope="scope">
                    {{scope.row.尺寸}} {{scope.row.尺寸单位}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="重量" label="产品重量(克)">
            </el-table-column>
            <el-table-column prop="展示图" label="展示图">
                <template slot-scope="scope">
                    <file-view v-if="scope.row.展示图" :file="scope.row.展示图"></file-view>
                </template>
            </el-table-column>
            <el-table-column prop="详情图集" label="详情图集">
                <template slot-scope="scope">
                    <el-image v-if="scope.row.详情图集 && scope.row.详情图集.length"
                        style="width: 40px; height: 40px;vertical-align: bottom;"
                        :src="scope.row.详情图集[0].fileUrl"
                        :preview-src-list="getImages(scope.row.详情图集)">
                      </el-image>
                    <!-- <file-view v-for="localFilePic in scope.row.详情图集" :key="localFilePic.fileID"
                         :multiple="true"
                         :file="localFilePic" /> -->
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="delProduct(scope.row)" size="small">删除</el-button>
                    <el-button type="text" @click="editProduct(scope.row)" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 5px;" @size-change="getData" @current-change="getData" :current-page.sync="pages.page"
            :page-sizes="[10, 20, 100]" :page-size.sync="pages.size"
            layout="total, sizes, prev, pager, next, jumper" :total="pages.total">
        </el-pagination>
        <el-dialog :title="this.form.id?'编辑分类':'添加分类'" v-if="dialogFormVisible" :visible.sync="dialogFormVisible">
            <el-form :label-width="'120px'">
                <el-form-item label="产品名称" required>
                    <el-input style="width: 215px;" v-model="form.名称"></el-input>
                </el-form-item>
                <el-form-item label="产品分类" required>
                    <el-select v-model="form.分类" placeholder="请选择">
                        <el-option v-for="item in categorys" :key="item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="材质" required>
                    <el-input style="width: 215px;" v-model="form.材质"></el-input>
                </el-form-item>
                <el-form-item label="尺寸" required class="lineheight26">
                    <number-range @input="sizeChange" :value="form.尺寸.split(' - ')" style="width: 215px;display: inline-block;"></number-range>
                    <el-input class="padding0" style="width: 50px;" placeholder="单位" v-model="form.尺寸单位"></el-input>
                    <!-- <el-input style="width: 215px;" v-model="form.尺寸"></el-input> -->
                </el-form-item>
                <el-form-item label="产品重量(克)" required class="lineheight26">
                     <number-range @input="weightChange" :value="form.重量.split(' - ')" style="width: 215px;"></number-range>
                    <!-- <el-input style="width: 215px;" oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="form.重量"><template slot="append">克</template></el-input> -->
                </el-form-item>
                <el-form-item label="展示图">
                    <file-upload @unload-success="coverSuccess" :file="form.展示图"
                        @remove-file="form.展示图=''"></file-upload>
                </el-form-item>
                <el-form-item label="详情图集">
                    <database-multiple-files size="mini" :files="form.详情图集" @files-change="filesChange" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="createProduct">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import fileUpload from '@/components/common/fileUpload.vue';
    import fileView from '@/components/common/fileView.vue';
    import databaseMultipleFiles from '@/components/common/databaseMultipleFiles.vue';
    import numberRange from '@/components/common/numberRange.vue';
    import ajax from '@/ajax';
    export default {
        name: 'product',
        components: {
            fileUpload,
            fileView,
            databaseMultipleFiles,
            numberRange
        },
        data: function() {
            return {
                loading:false,
                dialogFormVisible: false,
                form: {
                    名称: "",
                    分类: "",
                    材质: "",
                    尺寸: "",
                    尺寸单位: "",
                    重量: "",
                    展示图: null,
                    详情图集: [],
                },
                categorys: [],
                query: {
                    分类: null,
                    名称: null,
                },
                defaultForm: null,
                methodType: "post",
                pages: {
                    page: 1,
                    size: 10,
                    total: 0
                },
                tableData: []
            }
        },
        mounted() {
            this.defaultForm = JSON.parse(JSON.stringify(this.form))
            this.getData()
            this.getCategorys()
        },
        methods: {
            getImages(a){
                return a.map(function(i){
                    return i.fileUrl
                })
            },
            sizeChange(v){
                this.form.尺寸 = v.join(" - ")
            },
            weightChange(v){
                this.form.重量 = v.join(" - ")
            },
            filesChange(files) {
                this.form.详情图集 = files
            },
            coverSuccess(a, b, c) {
                this.form.展示图 = a
            },
            resetGet() {
                this.pages.page = 1
                this.query.分类 = null
                this.query.名称 = null
                this.getData()
            },
            queryClick() {
                this.pages.page = 1
                this.getData()
            },
            iconSuccess(a, b, c) {
                this.form.icon = a
            },
            activeIconSuccess(a, b, c) {
                this.form.activeIcon = a
            },
            getCategorys() {
                ajax('category', {
                    skip: 0,
                    limit: 20
                }, 'get').then(res => {
                    this.categorys = res.content
                })
            },
            getData() {
                let skip = (this.pages.page - 1) * this.pages.size
                let limit = this.pages.size
                this.loading = true
                ajax('product', {
                    skip,
                    limit,
                    query: this.query
                }, 'get').then(res => {
                    this.loading = false
                    this.tableData = res.content
                    this.pages.total = res.count
                }).catch(()=>{
                    this.loading = false
                })
            },
            addProduct() {
                this.currentRow = null
                this.dialogFormVisible = true;
                this.form = JSON.parse(JSON.stringify(this.defaultForm))
                this.methodType = "post"
            },
            editProduct(row) {
                this.currentRow = row
                this.dialogFormVisible = true;
                this.form = JSON.parse(JSON.stringify(row))
                this.methodType = "put"
            },
            createProduct() {
                let form = JSON.parse(JSON.stringify(this.form))
                // if(!form.icon){
                //     delete form.icon
                // }
                // if(!form.activeIcon){
                //     delete form.activeIcon
                // }
                ajax('product', form, this.methodType).then(res => {
                    console.log(res)
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.getData()
                })
            },
            delProduct(row) {
                this.$confirm('确定删除该分类？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ajax('product', {
                        _id: row._id
                    }, "delete").then(res => {
                        this.$message.success("删除成功")
                        this.getData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

        }
    }
</script>

<style>
</style>
